<template>
  <div style="text-align: center">
    <Row :gutter="10">
      <Col span="12"
           >
      <div id="myChart3"  v-if="this.pie2.length > 0" class="echarts-box"
           :style="{width: '98%', height: '360px'}"></div>
           <div class="typeSanBox echarts-box" v-else >
              <div>
                  <img src="../../../assets/images/process-no-data.png" />
                  <span>暂无数据</span>
              </div>
          </div>
      </Col>
      <Col span="12"
           >
      <div id="myChart4" v-if="this.pie3.length > 0" class="echarts-box"
           :style="{width: '98%', height: '360px'}"></div>
           <div class="typeSanBox echarts-box" v-else >
               <div>
                   <img src="../../../assets/images/process-no-data.png" />
                   <span>暂无数据</span>
               </div>
           </div>
      </Col>
    </Row>
  </div>
</template>
<script>
export default {
  props: ['pie2','pie3'],
  data() {
    return {

    }
  },
  mounted() {
     if(this.pie2.length > 0) {
      this.pieChart()
     }
     if(this.pie3.length > 0) {
          this.pieChart2()
     }


  },
  methods: {
    pieChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '管控情况',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: '80',
          right: '10',
          data: this.pie2.length> 0 ? ['未管控', '管控'] : []
        },
        series: [
          {
            name: '管控情况',
            type: 'pie',
            radius: ['35%', '50%'], //设置饼图大小
            center: ['40%', '50%'], //设置饼图位置
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie2.length> 0 ? [
              { value: this.pie2[0], name: '未管控', itemStyle: { color: '#5AD8A6' } },
              { value: this.pie2[1], name: '管控', itemStyle: { color: '#5B8FF9' } },
            ] : []
          }
        ]
      })
    },
    pieChart2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart4'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '管控结果',
          subtext: '',
          left: 'left',
          textStyle:{
              fontWeight:'bold',
              color:'#697786',
              fontSize:14
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          bottom: '80',
          right: '10',
          data: this.pie3.length> 0 ? ['不到位', '到位'] : []
        },
        series: [
          {
            name: '管控结果',
            type: 'pie',
            radius: ['35%', '50%'], //设置饼图大小
            center: ['40%', '50%'], //设置饼图位置
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '0',
                  fontWeight: 'bold'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.pie3.length> 0 ? [
              { value: this.pie3[0], name: '不到位', itemStyle: { color: '#5AD8A6' } },
              { value: this.pie3[1], name: '到位', itemStyle: { color: '#5B8FF9' } },
            ] : []
          }
        ]
      })
    }
  }
}
</script>
<style scoped>
#myChart {
  width: 100%;
}
.echarts-box {
  background: rgba(0, 59, 152, 0.02);
}
.nodata {
			width: 90%;
			position: absolute;
			top: 50%;
			text-align: center;
			transform: translateY(-50%);
			float: right;
			left: 10%
		}
</style>